<template>
  <div
    class="codeManageHeadComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.modulePT + 'px',
      paddingBottom: oItem.main.modulePB + 'px',
      paddingLeft: oItem.main.modulePLR + 'px',
      paddingRight: oItem.main.modulePLR + 'px',
    }"
  >
    <div
      class="style"
      :style="{
        backgroundColor: oItem.main.moduleBgColor || 'transparent',
        backgroundImage: oItem.main.moduleBgImg
          ? 'url(\'' + oItem.main.moduleBgImg + '\')'
          : 'none',
        borderTopLeftRadius: oItem.main.moduleBTR + 'px',
        borderTopRightRadius: oItem.main.moduleBTR + 'px',
        borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
        borderBottomRightRadius: oItem.main.moduleBBR + 'px',
      }"
    >
      <div
        class="left"
        :style="{
          fontSize: oItem.main.titleFontSize + 'px',
          color: oItem.main.titleFontColor,
        }"
      >
        新增码
      </div>
      <div class="right">
        <button>
          <span
            :style="{ backgroundColor: oItem.main.iconColor || 'transparent' }"
          ></span>
          <i
            class="iconfont icon-tianjia"
            :style="{ color: oItem.main.iconColor || 'transparent' }"
          ></i>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "codeManageHeadComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.codeManageHeadComponent {
  width: 100%;
  display: flex;
  flex: 1;
  box-sizing: border-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;

  .style {
    display: flex;
    flex: 1;
    width: 100%;
    justify-content: space-between;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    padding: 15px;
    box-sizing: border-box;
    align-items: center;
    overflow: hidden;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    .right {
      display: flex;
      justify-content: flex-end;
      button {
        width: 30px;
        height: 30px;
        position: relative;
        border: none;
        background-color: transparent;
        span {
          width: 100%;
          height: 100%;
          border-radius: 100%;
          opacity: 0.15;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 2;
        }
        i {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 3;
          transform: translate(-50%, -50%);
          font-size: 16px;
        }
      }
    }
  }
}
</style>
